<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">资源明细</div>
        </div>
        <div class="widget-body  am-fr">
          <customer-toolbar
            ref="toolbar"
            class="toolbar"
            @search="handleFind"
            @export="handleExport"
            areaTeam
            campusTeam
            hasExport
            recycleTime
            followOperatorName
          ></customer-toolbar>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                min-width="100"
                prop="studentName"
                label="学生姓名"
              >
              </el-table-column>
              <el-table-column
                min-width="70"
                label="性别"
              >
                <template scope="scope">
                  <div>{{{'0' : '' ,'1': '男', '2': '女'}[scope.row.sex]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="70"
                prop="gradeName"
                label="年级"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="bigCategory"
                label="来源大类"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="smallCategory"
                label="来源小类"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="campusName"
                label="意向校区"
              >
              </el-table-column>
              <el-table-column
                min-width="165"
                prop="phoneNo"
                label="电话号码"
              >
              </el-table-column>
              <el-table-column
                min-width="165"
                prop="importOperatorName"
                label="项目活动名称"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                label="项目活动日期"
              >
                <template scope="scope">
                  <div>{{scope.row.projectTime | formatTime}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="紧急程度"
              >
                <template scope="scope">
                  <div>{{{'0' : '低' ,'1': '中', '2': '高'}[scope.row.priority]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="165"
                prop="remark"
                label="备注"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="分配时间"
              >
                <template scope="scope">
                  <div>{{scope.row.alloCreateTime | formatTime}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="followOperatorName"
                label="抢占人"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="departmentName"
                label="导入部门"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="回收时间"
              >
                <template scope="scope">
                  <div>{{scope.row.recycleTime | formatTime}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="跟进状态"
              >
                <template scope="scope">
                  <div>{{{'0' : '否' ,'1': '是'}[scope.row.followStatus]}}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              @paging="loadTableData"
            />
          </div>
        </div>
        <dispatch-detail
          @completed="loadTableData"
          ref="dispatchDetail"
        ></dispatch-detail>
      </div>
    </div>
  </div>
</template>
<script>
import io from "../../lib/io";
import CustomerToolbar from "./CustomerToolbar.vue";
import Pagination from "../base/Pagination.vue";
import moment from "moment";
import DispatchDetail from "./DispatchDetail.vue";

export default {
  data: function() {
    return {
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [],
      checkList: []
    };
  },
  components: {
    CustomerToolbar,
    Pagination,
    DispatchDetail
  },
  mounted: function() {
    $(window).smoothScroll();
  },
  methods: {
    // handleSelectionChange (val) {
    //   this.checkList = val
    // },
    handleAllo(type) {
      let customerResourceIds = [];
      if (this.checkList.length === 0) {
        this.$alert("请至少选择一条记录！");
        return;
      }
      this.checkList.map(val => {
        if (val.alloStatus === "0") {
          customerResourceIds.push(val.customerResourceId);
        }
      });
      if (customerResourceIds.length === 0) {
        this.$alert("您选择的记录都已经分配校区，请重新选择！");
      } else {
        this.$refs.dispatchDetail.type = type;
        this.$refs.dispatchDetail.show();
        this.$refs.dispatchDetail.customerResourceId = customerResourceIds;
        this.$refs.dispatchDetail.checkLength = this.checkList.length;
      }
    },
    handleFind(formData) {
      this.formData = this.formatData(formData);
      this.loadTableData(1);
    },
    handleExport() {
      let param = this.formData;
      io.downloadFile(
        io.downloadResourceRecycle,
        param,
        ret => {}
      );
    },
    loadTableData(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1;
      this.$showLoading();
      io.post(
        io.resourceRecycle,
        Object.assign({}, this.formData, {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }),
        ret => {
          this.$hiddenLoading();
          if (ret.success) {
            this.tableData = ret.data.list;
            this.total = ret.data.total;
          } else {
            this.$alert(ret.desc);
          }
        }
      );
    },
    formatData(data) {
      return {
        areaTeamId: data.areaTeamId,
        campusId: data.campusId,
        followOperatorName: data.followOperatorName,
        recycleTimeOfStart: data.recycleTime[0]
          ? moment(data.recycleTime[0]).format("YYYY-MM-DD H:mm:ss")
          : "",
        recycleTimeOfEnd: data.recycleTime[1]
          ? moment(data.recycleTime[1])
              .endOf("day")
              .format("YYYY-MM-DD H:mm:ss")
          : ""
      };
    }
  }
};
</script>
<style lang="less" scoped>
</style>
